<template>
  <div class="dianChiCu">
    <div class="main">
      <div class="name">{{ elementData.name }}</div>
      <div class="mainContent">
        <div class="soc">
          <div class="number">{{ SOC }}%</div>
          SOC
        </div>
        <div class="soh">
          <div class="number">{{ SOH }}%</div>
          SOH
        </div>
      </div>
    </div>
    <div class="content">
      <div class="item pcs">
        <div class="pcsIcon">
          <!-- 资产编码 -->
          <div class="assertCode">
            <div>资产编码：{{ assetCodeData?.pcs?.pcsAssesCode || "--" }}</div>
            <div>
              资产编码释义：{{ assetCodeData?.pcs?.pcsComment || "--" }}
            </div>
          </div>
        </div>
        <div class="name" @click="handlePcs">
          PCS
          <RightOutlined v-if="!showPcs" />
          <LeftOutlined v-else />
        </div>
        <div class="pcsContent" v-if="showPcs">
          <div class="title">
            PCS参数<CloseOutlined class="closeIcon" @click="handlePcs" />
          </div>
          <div class="box">
            <div class="pcsItem" v-for="(item, index) in pcsData" :key="index">
              {{ item.name }}：{{ item.value }} {{ item.unit }}
            </div>
          </div>
        </div>
      </div>
      <div class="item gaoYa">
        <div class="gaoYaIcon">
          <!-- 资产编码 -->
          <div class="assertCode">
            <div>资产编码：{{ assetCodeData?.hvb?.hvbAssesCode || "--" }}</div>
            <div>
              资产编码释义：{{ assetCodeData?.hvb?.hvbComment || "--" }}
            </div>
          </div>
        </div>
        <div class="name">高压盒</div>
      </div>
      <div class="item pack">
        <div class="name" @click="handlePack">
          电池PACK
          <RightOutlined v-if="!showPack" /> <LeftOutlined v-else />
        </div>
        <div class="packBox" v-if="showPack">
          <div class="cellBox" v-if="showCell">
            <div class="title" @click="closeCell">
              {{ `PACK${packLabel}` }}<CloseOutlined class="closeIcon" />
            </div>
            <div
              class="cellItem"
              v-for="index in batteryInfo.cellNumberPerPack"
              :key="index"
            >
              <div class="cellName">电芯{{ index }}</div>
              <!-- 资产编码 -->
              <div class="assertCode">
                <div>
                  资产编码：{{
                    assetCodeData?.pack?.[selectPackIndex]?.cell[index]
                      ?.cellAssesCode || "--"
                  }}
                </div>
                <div>
                  资产编码释义：{{
                    assetCodeData?.pack?.[selectPackIndex]?.cell[index]
                      ?.cellComment || "--"
                  }}
                </div>
              </div>
            </div>
          </div>
          <div class="packItem" v-for="(item, index) in packList" :key="index">
            <div class="packIcon">
              <!-- 资产编码 -->
              <div class="assertCode">
                <div>
                  资产编码：{{
                    assetCodeData?.pack?.[index]?.packAssesCode || "--"
                  }}
                </div>
                <div>
                  资产编码释义：{{
                    assetCodeData?.pack?.[index]?.packComment || "--"
                  }}
                </div>
              </div>
            </div>
            <div class="packName" @click="handleCell(item, index)">
              PACK{{ item.label }}<RightOutlined v-if="item.check" />
              <LeftOutlined v-else />
            </div>
          </div>
        </div>
      </div>
      <div class="item xiaoFang">
        <div class="name">消防系统</div>
      </div>
      <div class="item yeLeng" v-if="assetCodeData?.lcs?.lcAssesCode">
        <div class="yeLengIcon">
          <!-- 资产编码 -->
          <div class="assertCode">
            <div>资产编码：{{ assetCodeData?.lcs?.lcAssesCode || "--" }}</div>
            <div>资产编码释义：{{ assetCodeData?.lcs?.lcComment || "--" }}</div>
          </div>
        </div>
        <div class="name">液冷机</div>
      </div>
      <div class="item kongTiao">
        <div class="kongTiaoIcon">
          <!-- 资产编码 -->
          <div class="assertCode">
            <div>资产编码：{{ assetCodeData?.he?.heAssesCode || "--" }}</div>
            <div>资产编码释义：{{ assetCodeData?.he?.heComment || "--" }}</div>
          </div>
        </div>
        <div class="name">空调</div>
      </div>

      <div class="line" />
    </div>
  </div>
</template>
<script setup>
;
import dianChiCuImg from "@/assets/drag/dianChiCu.png";
import { EQUIP_TYPE } from "@/constants/stationConfig";
const props = defineProps({
  elementData: {
    type: Object,
  },
  pcsData: {
    type: Object,
  },
  batteryInfo: {
    type: Object,
  },
  assetCodeData: {
    type: Object,
  },
});
const packList = ref([]);
const cellkList = ref([]);
watch(
  () => props.batteryInfo,
  (val) => {
    for (let i = 0; i < props.batteryInfo.packNumberPerCluster; i++) {
      packList.value.push({
        value: i + 1,
        label: i + 1,
        check: false,
      });
    }
    for (let i = 0; i < props.batteryInfo.cellNumberPerPack; i++) {
      cellkList.value.push({
        value: i + 1,
        label: i + 1,
        check: false,
      });
    }
  },
  { immediate: true }
);
const SOC = computed(() => {
  if (props.elementData.type === EQUIP_TYPE.CHONG_DIAN_ZHUANG) {
    return props.elementData[
      `blockNameInfo${props.elementData.blockType}`
    ]?.find((item) => item.name === "SOC").value;
  }
  return props.elementData.infoData?.find((item) => item.name === "SOC").value;
});
const SOH = computed(() => {
  if (props.elementData.type === EQUIP_TYPE.CHONG_DIAN_ZHUANG) {
    return props.elementData[
      `blockNameInfo${props.elementData.blockType}`
    ]?.find((item) => item.name === "SOH").value;
  }
  return props.elementData.infoData?.find((item) => item.name === "SOH").value;
});

const $api = inject("$api");
const showPcs = ref(false);
const handlePcs = () => {
  showPcs.value = !showPcs.value;
  showPack.value = false;
  showCell.value = false;
};
const showPack = ref(false);
const handlePack = () => {
  showPack.value = !showPack.value;
  showPcs.value = false;
};
const showCell = ref(false);
const packLabel = ref(null);
const selectPackIndex = ref(null);
const handleCell = (item, index) => {
  showCell.value = true;
  for (const item of packList.value) {
    item.check = false;
  }
  packList.value[index].check = true;
  packLabel.value = item.label;
  selectPackIndex.value = index;
};
const closeCell = () => {
  showCell.value = false;
  showPack.value = false;
  packLabel.value = null;
};
const assetCode = ref({});
onMounted(() => {
  assetCode.value = props.assetCodeData;
});
onBeforeUnmount(() => {
  closeCell();
  packList.value = [];
  cellkList.value = [];
});
</script>
<style lang="less" scoped>
.dianChiCu {
  margin: 40px 0 20px 40px;
}
.main {
  width: 60px;
  height: 80px;
  background: url("@/assets/drag/dianChiCu.png") no-repeat center center;
  display: inline-block;
  vertical-align: middle;
  background-size: contain;
  position: relative;
  bottom: 4px;
  &::before {
    content: "";
    position: absolute;
    top: 44px;
    left: 64px;
    width: 62px;
    height: 1px;
    background: #ccc;
  }
  .name {
    width: 100px;
    text-align: center;
    position: absolute;
    left: -17px;
    top: -9px;
  }
  .mainContent {
    position: absolute;
    bottom: -38px;
    width: 130px;
    left: -30px;
    font-size: 12px;
    .number {
      font-weight: bold;
      font-size: 14px;
      margin-bottom: 5px;
    }
    .soc,
    .soh {
      width: 65px;
      display: inline-block;
      text-align: center;
    }
  }
}
.content {
  display: inline-block;
  vertical-align: middle;
  width: 200px;
  margin-left: 120px;
  // border-left: 1px solid #ccc;
  position: relative;
  .item {
    width: 80px;
    height: 120px;
    position: relative;
    &::before {
      content: "";
      position: absolute;
      top: 60px;
      right: 72px;
      width: 63px;
      height: 1px;
      background: #ccc;
    }
    .name {
      width: 100px;
      text-align: center;
      position: absolute;
      left: -8px;
      bottom: 14px;
      cursor: pointer;
    }
  }
  .line {
    position: absolute;
    width: 1px;
    background: #ccc;
    top: 60px;
    left: -55px;
    height: calc(100% - 120px);
  }
  .pcs {
    .pcsIcon {
      background: url("@/assets/drag/PCS.png") no-repeat center center;
      width: 50px;
      height: 50px;
      position: absolute;
      top: 30px;
      left: 14px;
      &:hover {
        .assertCode {
          display: block;
        }
      }
    }
  }
  .gaoYa {
    .gaoYaIcon {
      background: url("@/assets/drag/gaoYa.png") no-repeat center center;
      width: 59px;
      height: 50px;
      position: absolute;
      top: 35px;
      left: 14px;
      &:hover {
        .assertCode {
          display: block;
        }
      }
    }
  }
  .yeLeng {
    .yeLengIcon {
      background: url("@/assets/drag/yeLeng.png") no-repeat center center;
      width: 53px;
      height: 50px;
      position: absolute;
      top: 35px;
      left: 14px;
      background-size: 95%;
      &:hover {
        .assertCode {
          display: block;
        }
      }
    }
  }
  .pack {
    background: url("@/assets/drag/pack2.png") no-repeat center center;
  }
  .xiaoFang {
    background: url("@/assets/drag/xiaoFang.png") no-repeat 65% center;
  }
  .kongTiao {
    .kongTiaoIcon {
      background: url("@/assets/drag/kongTiao.png") no-repeat center center;
      width: 53px;
      height: 50px;
      position: absolute;
      top: 35px;
      left: 14px;
      background-size: 95%;
      &:hover {
        .assertCode {
          display: block;
        }
      }
    }
  }
}
.pcsContent {
  background: #555555;
  position: absolute;
  width: 360px;
  top: 50;
  left: 200px;
  border-radius: 5px;
  &::before {
    content: "";
    position: absolute;
    top: 60px;
    left: -130px;
    width: 120px;
    height: 1px;
    background: #ccc;
  }
  .title {
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    color: #fff;
    font-size: 16px;
    border-bottom: 1px solid #999;
  }
  .box {
    padding: 0 20px 20px 20px;
    .pcsItem {
      display: inline-block;
      width: 150px;
      margin-top: 20px;
      line-height: 1.5;
      vertical-align: text-top;
      &:nth-child(2n) {
        margin-left: 20px;
      }
    }
  }
}
.closeIcon {
  position: absolute;
  top: 12px;
  right: 10px;
  cursor: pointer;
  font-size: 14px;
}
.pack {
  .packBox {
    position: absolute;
    background: #555555;
    top: 50%;
    left: 150px;
    transform: translate(0, -50%);
    padding: 0 0 10px 10px;
    width: 252px;
    border-radius: 5px;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      left: -73px;
      width: 60px;
      height: 1px;
      background: #ccc;
    }
  }
  .packItem {
    vertical-align: middle;
    position: relative;
    display: inline-block;
    margin: 0 10px 10px 0;
    font-size: 12px;
  }
  .packIcon {
    background: url("@/assets/drag/pack1.png") no-repeat center center;
    width: 50px;
    height: 50px;
    background-size: contain;
    &:hover {
      .assertCode {
        display: block;
      }
    }
  }
  .packName {
    width: 60px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -10px;
    cursor: pointer;
    .anticon {
      font-size: 10px;
      display: inline-block;
    }
  }
  .cellBox {
    position: absolute;
    background: #555555;
    top: 50%;
    left: 343px;
    transform: translate(0, -50%);
    padding: 0 0 10px 10px;
    width: 372px;
    border-radius: 5px;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translate(0, -50%);
      left: -76px;
      width: 60px;
      height: 1px;
      background: #ccc;
    }
    .title {
      height: 40px;
      line-height: 40px;
      padding: 0 10px;
      color: #fff;
      font-size: 16px;
      border-bottom: 1px solid #999;
    }
  }
  .cellItem {
    background: url("@/assets/drag/dianXin.png") no-repeat center center;
    width: 50px;
    height: 50px;
    background-size: 90%;
    vertical-align: middle;
    position: relative;
    display: inline-block;
    margin: 0 10px 10px 0;
    font-size: 12px;
    &:hover {
      .assertCode {
        display: block;
      }
    }
  }
  .cellName {
    width: 55px;
    text-align: center;
    position: absolute;
    left: 0;
    bottom: -10px;
    cursor: pointer;
  }
}
.assertCode {
  position: absolute;
  left: 100%; 
  top: 50%; 
  transform: translateY(-50%); 
  margin-left: 10px;
  background-color: rgba(50, 50, 50, 0.9); 
  color: #fff; 
  padding: 8px 12px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); 
  font-size: 13px; 
  line-height: 1.5; 
  z-index: 100; 
  width: max-content; 
  white-space: nowrap; 
  text-align: left; 
  pointer-events: none; 
  display: none;
}

.assertCode div {
  margin-bottom: 6px;
}

.assertCode div:last-child {
  margin-bottom: 0;
}
</style>